<!-- Header-->
<header class="bg-dark py-5" data-diy="place" data-diy-id="${path}">
	<div class="container px-5">
		<div class="row gx-5 align-items-center justify-content-center">
			<div class="col-lg-8 col-xl-7 col-xxl-6">
				<div class="my-5 text-center text-xl-start">
					<h1 class="display-5 fw-bolder text-white mb-2">${(metadata.extendData.title)!}</h1>
					<p class="lead fw-normal text-white-50 mb-4">${(metadata.extendData.title2)!}</p>
					<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
						<a class="btn btn-primary btn-lg px-4 me-sm-3" href="${(metadata.extendData.link1)!}">${(metadata.extendData.button1)!}</a>
						<a class="btn btn-outline-light btn-lg px-4" href="${(metadata.extendData.link2)!}">${(metadata.extendData.button2)!}</a>
					</div>
				</div>
			</div>
			<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center swiper index-focus">
				<div class="swiper-wrapper">
					<#list page.list as a>
					<div class="swiper-slide">
						<a href="${a.url?has_content?then(a.url,'#')}">
							<img class="img-fluid rounded-3 my-5" src="${a.cover}" alt="${a.title!}" />
						</a>
					</div>
					</#list>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</div>
	</div>
</header>